<template>
    <div class="menuHead">
        <div class="menuHeadContent">
            <svg class="icon" aria-hidden="true">
                <use xlink:href="#icon-xiangmu"></use>
            </svg>
            <span>项目</span>
        </div>
    </div>
    <el-aside id="el-aside">
        <el-scrollbar>
            <el-menu :default-active='activeItem'>
                <el-sub-menu index="lixiang">
                    <template #title>
                        <svg class="icon1" aria-hidden="true">
                            <use xlink:href="#icon-gongsijibu"></use>
                        </svg>
                        <span>项目列表</span>
                    </template>
                    <el-menu-item v-for="(project,index) in projects" @click="changeProject(project,index)" :index="project.proName" :key="project.proName">
                        {{project.proName}}
                    </el-menu-item>

                </el-sub-menu>

            </el-menu>
         </el-scrollbar>
    </el-aside>

    
    <el-main>
        <div id="mapContain" class="mapContain" v-loading="loading" element-loading-text="地图加载中...">           
        </div>
    </el-main>
    
    

    <div id="infoWindow" v-show="infoWindowShow">
        <div class='infoWindowTitle'>
            {{currentProject.proName}}
        </div>
        <div class='infoWindowContain'>
            {{currentProject.description}}
        </div>
        <div class='infoWindowMessage'>
            <p>项目类型：{{currentProject.type}}</p>
            <p>项目状态：{{currentProject.status}}</p>
            <p>创建人：{{currentProject.creater}}</p>
            <p>创建时间：{{currentProject.createTime}}</p>
        </div>
        <div class='infoWindowBtn'>
            <el-button size='small' @click="toProject">进入</el-button>
        </div>
    </div>

</template>

<script>
import MapLoader from '@/assets/js/mapLoader'
import { ElMessage } from 'element-plus';


export default {
    data(){
        return{
            activeItem: '',
            infoWindowShow: false,
            loading: true,
            currentProject:{},
            projects:[{
                proid: "123125454543",
                status: "实施中",
                type: "公开",
                creater: "皮卡丘",
                description: "关于项目的描述",
                startTime: '2020-09-23',
                endTime: '2022-09-23',
                location: "广西省铜川市王益区",
                client: "铜川市王益区市财政局",
                createTime: "2021-01-31",
                proName: '基于加权马尔科夫链的北京市降水量预测',
                lng: 116.39,
                lat: 39.9
            },{
                proid: "123125454543",
                status: "实施中",
                type: "公开",
                creater: "皮卡丘",
                description: "拟采用京津冀三省2001-2020年共20年的供水量作为原始数据，预测到2025年的供水量情况，对实际进行比较，以验证系统模型在应用上的可行性和准确性。",
                startTime: '2020-09-23',
                endTime: '2022-09-23',
                location: "广西省铜川市王益区",
                client: "铜川市王益区市财政局",
                createTime: "2021-01-31",
                proName: '基于灰色预测模型的供水量预测',
                lng: 117.21,
                lat: 39.12
            },{
                proid: "123125454543",
                status: "实施中",
                type: "公开",
                creater: "皮卡丘",
                description: "《地表水环境质量标准》（GB3838-2002）按照地表水环境功能分类和保护目标，规定了水环境质量应控制的项目及限值，使用于中华人民共和国领域内江河、湖泊、运河、渠道、水库等具有使用功能的地表水水域。",
                startTime: '2020-09-23',
                endTime: '2022-09-23',
                location: "广西省铜川市王益区",
                client: "铜川市王益区市财政局",
                createTime: "2021-01-31",
                proName: '批量水质和湖库富营养化评价方法应用',
                lng: 114.50,
                lat: 38.07
            }],
            markers:[],
        }
    },
    methods:{
        //点击侧边导航改变地图
        changeProject(project,index){
            mainMap.setZoomAndCenter(
                10, new AMap.LngLat(project.lng, project.lat)
            ),
            this.currentProject = project;
            this.infoWindowShow = true;
            this.markers[index].emit('click', {target:this.markers[index]});
        },
        //地图加载方法
        amapLoader(){
            MapLoader().then((AMap) => {
                this.initMap();
                this.addPlugins();
                this.rightclickMenu();
                this.setProjects();
            }, (e) => {
                ElMessage({
                    message: e,
                    type: 'error',
                    duration: 1000
                })
            })
        },
        //地图初始化方法
        initMap(){
            window.mainMap = new AMap.Map('mapContain',{
                //按需填入参数
                viewMode: '3D',
                pitch:30,
                skyColor: '#87CEEB',
                defaultCursor: 'default',
                crs: 'EPSG3857',
                animateEnable: true,
            });
        },
        // 创建一个右键菜单实例
        rightclickMenu(){
            var contextMenu = new AMap.ContextMenu();
            contextMenu.addItem("标准",function(e){
                mainMap.setMapStyle("amap://styles/normal");
                contextMenu.close();
            },0);
            contextMenu.addItem("马卡龙",function(e){
                mainMap.setMapStyle("amap://styles/macaron");
                contextMenu.close();
            },1);
            contextMenu.addItem("幻影黑",function(e){
                mainMap.setMapStyle("amap://styles/dark");
                contextMenu.close();
            },2);
            contextMenu.addItem("远山黛",function(e){
                mainMap.setMapStyle("amap://styles/whitesmoke");
                contextMenu.close();
            },3);
            contextMenu.addItem("草色青",function(e){
                mainMap.setMapStyle("amap://styles/fresh");
                contextMenu.close();
            },4);
            contextMenu.addItem("极夜蓝",function(e){
                mainMap.setMapStyle("amap://styles/darkblue");
                contextMenu.close();
            },5);
            mainMap.on('rightclick',function(e){
                contextMenu.open(mainMap, e.lnglat);
            })
        },
        //加载插件
        addPlugins(){
            // var toolbar = new AMap.ToolBar({position:{bottom:'20px',right:'40px'}});
            var scale = new AMap.Scale();
            var controlBar = new AMap.ControlBar({position:{bottom:'-170px',right:'10px'}});
            // mainMap.addControl(toolbar);
            mainMap.addControl(scale);
            mainMap.addControl(controlBar);
        },
        //项目列表打点到地图并加上信息窗体
        setProjects(){
            //信息窗体           
            var infoWindow = new AMap.InfoWindow({
                closeWhenClickMap: true,
                offset: new AMap.Pixel(0, -40),
                autoMove: true,
                content: document.querySelector('#infoWindow'),
                closeWhenClickMap: false
            })
            //将项目打点到地图上  
            for(var i=0; i< this.projects.length; i++){
                var iconLabel = [...this.projects[i].proName][0];
                var marker = new AMapUI.SimpleMarker({
                    iconLabel: iconLabel,
                    iconTheme: 'fresh',
                    iconStyle: 'red',
                    showPositionPoint: true,
                    containerClassNames:'iconLabelStyle',
                    map: mainMap,
                    position: new AMap.LngLat(this.projects[i].lng, this.projects[i].lat),
                    extData: this.projects[i],
                })
                marker.on('click', (e) => {
                    this.activeItem = e.target.getExtData().proName;
                    this.infoWindowShow = true;
                    this.currentProject = e.target.getExtData();
                    infoWindow.open(mainMap, e.target.getPosition());
                    mainMap.setZoomAndCenter(
                        10, e.target.getPosition()
                    );
                },this);

                this.markers[i] = marker;
            }
            mainMap.setFitView(this.markers);
        },
        toProject(){
            this.$router.push({path:'/Project'})
        }
    },
    mounted(){
        this.amapLoader();
        this.loading = false;
    },
}
</script>

<style>
.el-main{
    padding: 14px;
    background-color: ghostwhite;
}
.mapContain{
    height: 100%;
    border-radius: 10px;
    border: 1px solid #d1d1d1;
}
#el-aside{
    margin-top: 50px;
    width: 233px;
    border-right: 1px solid #eee;
    height: calc(100vh - 100px);
}
.menuHead{
    display: flex;
    height: 50px;
    width: 233px;
    background: #2B7BD0;
    color: white;
    font-weight: bold;
    font-size: 18px;
    position: absolute;
    z-index: 100;
}
.menuHead .menuHeadContent{
    display: flex;
    align-items: center;
    margin-left: 30px;
}
.menuHeadContent .icon{
    color: white;
}
.menuHead span{
    margin-left: 10px;
}
.menuHead .icon{
    font-size: 22px;
}
.el-sub-menu .icon1{
    width: 1em; height: 1em;
    vertical-align: -0.15em;
    fill: currentColor;
    overflow: hidden;
    color: #2B7BD0;
    font-size: 18px;
    margin-left: 10px;
}

.el-sub-menu span{
    font-size: 14px;
    margin-left: 6px;
}
.el-menu-item{
    margin-left: 12px;
}
.iconLabelStyle{
    color: white;
    font-size: 15px;
    font-weight: bold;
    
}
#infoWindow{
    display: flex;
    flex-direction: column;
    /* position: absolute; */
}
.infoWindowTitle{
    padding-bottom: 2px;
    border-bottom: #d1d1d1 solid 1px;
    font-size: 15px;
    font-weight: bold;
}
.infoWindowContain{
    font-size: 14px;
    padding: 6px 5px;
    border-bottom: #d1d1d1 solid 1px;
    /* background: ghostwhite; */
    color: #484848;
}
.infoWindowMessage{
    font-size: 13px;
    padding: 5px 5px 10px 15px;
    line-height: 20px;
    color: #484848;
    /* background: ghostwhite; */
}
.infoWindowBtn{
    position: absolute;
    font-size: 14px;
    right: 25px;
    bottom: 20px;
}
</style>